<template>
    <div>
        <div> 
            <input type="text" v-model="value">
            <p>{{ value }}</p>
        </div>
        <div>
            <input type="text" v-model="obj.name">
        </div>
        <div>
            <input type="text" v-model="obj2.address.city"></input>
        </div>
    </div>
</template>


<script setup>
import { reactive, ref,watch} from 'vue'
/** 
 *  watch 侦听
 *      
 *  watch
 *       watch（响应式数据，变化的回调函数）
 */

 /**
  * 简单使用watch
  */
 //只要上面的输入框发生变化 就会执行回调函数
const value = ref('lanlan')
//watch 监听回调函数
watch(value,(newValue,oldValue)=>{   //value 监听的数据源 
    console.log('value变化了:newValue,oldValue')
    //改变value的值
    value.value = newValue.toString()
})

 /**
  * 复杂使用watch
  */
//定义一个对象
const obj= reactive({
    name:'lanlan',
    age:32
})
//也可以监听一个对象
watch(obj,()=>{
    console.log('obj对象变化了')
}) 
//如果只监听对象的一个属性，可以采用getter函数的方式监听
watch(()=>obj.name,()=>{   //()=>obj.name：监听obj.name属性，因为是对象所以需要加()
     console.log('函数的方式监听obj.name属性变化了')
})

const a = ref(1)
const b = ref(2)
watch([a,b,()=>obj.name],(p1,p2)=>{      // [a,b] 监听的数据源    ()=>{} 回调函数
    console.log('a | b 属性变化了')
    // 这里可以获取到变化前后的值  p1就是新数据值，p2就是旧值
    console.log(p1,p2)
})
//设置三秒后改变a|b的值
setTimeout(()=>{
    a.value = 999
    b.value = 999
},3000)



 /**
  * 多源变化，深度侦听watch
  */
const obj2 = reactive({
    name:'lanlan',
    age:32,
    address:{
        city:'上海'
    }
})
watch(obj2,(o1,o2)=>{
    console.log('obj2对象变化了:当前的o2值',o1.address.city)
},{
    //深度侦听
    deep:true,
    //立即执行监听
    immediate:true
    //只监听一次   不管数据怎么变化 值执行一次。
    //once: true
})

</script>


<style>
    
</style>